<template>
	<div class="search-suggestion">
		<van-cell v-for="(item,index) in suggestions" :key="index" icon="search" @click="$emit('search',item)">
			<div slot="title" v-html="highlight(item)"></div>
		</van-cell>
	</div>
</template>

<script>
	import { getSearchSuggestions } from '../../../utils/search.js'
	import { debounce } from 'lodash'
	
	export default {
		name: 'SearchSuggestion',
		props: {
			searchText: {
				type: String,
				required:true
			}
		},
		data() {
			return {
				suggestions:[]
			}
		},
		watch: {
			searchText:{
				 handler: debounce(async function () {
					 const { data } = await getSearchSuggestions(this.searchText)
					 this.suggestions = data.data.options
				 },300) ,
					
				immediate: true
			}
		},
		methods: {
			//高亮处理
			highlight(item) {
				return item.replace(
				new RegExp(this.searchText,'gi'),`<span style="color:red">${this.searchText}</span>`
				)
				
			}
		}
	}
</script>

<style>
</style>
